<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
import orderList from './components/order-list.vue'
import customTab from './components/custom-tab.vue'
import { ref } from 'vue';

// 1. 标签页数组
const tabIndex = ref(0)
const orderTabs = ref([
  { label: '问医生', rendered: true },
  { label: '极速问诊', rendered: false },
  { label: '开药问诊', rendered: false }
])
const changeTabs = (index: number) => {
  tabIndex.value = index
  // 保证每个标签页只会被渲染一次
  orderTabs.value[index].rendered = true
}
</script>

<template>
  <custom-tab :data="orderTabs" @change="changeTabs" />
  <!-- 列表组件 -->
  <view v-for="(tab, index) in orderTabs" :key="index" v-show="tabIndex === index">
    <order-list v-if="tab.rendered" :type="tabIndex + 1" />
  </view>
</template>

<style lang="scss"></style>